<template>
    <div class="w-full h-10 text-lg m-1 border-l-4 border-l-green-400 flex justify-around items-center text-white">
        <div @click="active = 'today'"
            :class="active === 'today' ? 'text-yellow-300 border-b-2 border-b-yellow-300' : ''">
            查今日
        </div>
        <div @click="active = 'yestday'"
            :class="active === 'yestday' ? 'text-yellow-300 border-b-2 border-b-yellow-300' : ''">
            查昨天
        </div>
        <div @click="active = 'week'"
            :class="active === 'week' ? 'text-yellow-300 border-b-2 border-b-yellow-300' : ''">
            查一周
        </div>
        <div @click="active = 'all'" :class="active === 'all' ? 'text-yellow-300 border-b-2 border-b-yellow-300' : ''">
            查全部
        </div>
    </div>

    <List :date-time="dateList[active]" />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import dayjs from 'dayjs';
import List from './components/moenyList.vue'

const active = ref('today')
const dateList = {
    'today': [dayjs().format('YYYY-MM-DD 00:00:00'), dayjs().format('YYYY-MM-DD 23:59:59')],
    'yestday': [
    dayjs().subtract(1, 'day').format('YYYY-MM-DD 00:00:00'),
    dayjs().subtract(1, 'day').format('YYYY-MM-DD 23:59:59')
    ],
    'week': [
        dayjs().subtract(7, 'day').format('YYYY-MM-DD 00:00:00'),
        dayjs().format('YYYY-MM-DD 23:59:59')
    ],
    'all': ''
}
</script>